<template>
  <div class="cartoon">
    <van-loading class="loading" v-show="IsLongding===false" type="spinner" size="24px">加载中...</van-loading>
    <div class="cartoon-container" v-show="IsLongding===true">
      <div class="cartoon-nav" :style="{ backgroundColor: backgroundColor }">
        <van-icon @click="goBack" name="arrow-left" />
        <div class="cartoon-name auto-text" :style="{ opacity: opacity }">{{cartoonData.title}}</div>
        <div v-show="isZhui === true" class="cartoon-right" @click="isZhuiShow">{{zhuiShow ? '已追': '追漫'}}</div>
      </div>
      <div class="middle" ref="cartoon" @scroll="scroll">
        <div class="cartoon-img">
          <div ref="zhui" class="cartoon-img-box">
            <img :src="cartoonData.horizontal_cover" alt="" />
          </div>
          <div class="cartoon-position" @click="isZhuiShow">
            <div class="cartoon-position-box">
              <van-icon name="star-o" />
              <div>{{zhuiShow ? '已追': '追漫'}}</div>
            </div>
          </div>
        </div>

        <div class="cartoon-userinfo">
          <div class="userinfo-name">{{cartoonData.title}}</div>
          <div class="userinfo-time">
            <span v-if="cartoonData.is_finish===0" class="userinfo-finshi">连载中</span>
            <span v-if="cartoonData.is_finish===1" class="userinfo-finshi">已完结</span>
            <span class="userinfo-finshi-time">{{cartoonData.renewal_time}}</span>
          </div>
          <div class="userinfo-username">
            <div class="userinfo-username-left">
              <span class="username">{{authorName}}</span>&nbsp;·&nbsp;
              <span class="privoce">{{style}}</span>&nbsp;|&nbsp;
              <span v-if="cartoonData.is_finish===0" class="updata">已更新{{cartoonData.total}}话</span>
              <span v-if="cartoonData.is_finish===1" class="updata">共{{cartoonData.total}}话</span>
            </div>
            <div class="userinfo-username-right">
              <div class="userinfo-username-right-box" @click="cahngeAbout">
                <span>{{ lookAbout }}</span>
                <van-icon
                  :name="isLook === false ? 'arrow-down' : 'arrow-up'"
                />
              </div>
            </div>
          </div>

          <!-- 简介 -->
          <div v-show="isLook === true">
              <div class="author">
                  <div>作者：</div>
                  <div class="author-name">{{author}}</div>
              </div>
            <div class="introduction">
                <div class="introduction-name">简介：</div>
                <div class="introduction-container" v-html="cartoonData.evaluate">
                {{cartoonData.evaluate}}
                </div>
            </div>
          </div>


          <div class="select" ref="select">
            <div class="comment">
              <div class="comment-top" v-if="dianpin!=''">
                <div class="comment-top-left">漫画点评</div>
                <div class="comment-top-right" @click="gotoAction(cartoonData.id,cartoonData.title,scroe)">
                  查看全部
                  <van-icon name="arrow" />
                </div>
              </div>
              <div class="comment-bottom" v-for="(item,index) in dianpin" :key="index">
                <div class="comment-bottom-box">
                  <div class="comment-bottom-box-top">
                    <div class="comment-bottom-box-top-box" @click="gotoUser(item.uid)">
                      <img :src="item.face" alt="" />
                    </div>
                    <div class="comment-bottom-box-top-box-name">
                      {{item.nick_name}}
                    </div>
                  </div>
                  <div class="comment-bottom-box-commit">{{item.content}}</div>
                  <div class="comment-bottom-box-bottom">
                    <div ref="num" :class="item.isDian === true?'active':''"  @click="dian($event,item)">
                          <van-icon data-is="false" name="good-job-o" />
                          <span ref="like" class="number">{{item.like_count}}</span>
                    </div>

                    <div class="time-left">{{item.current_time}}</div>
                  </div>
                </div>
                <div></div>
              </div>

              <div class="discussion">
                <div class="discussion-box">
                  <div class="discussion-box-left">漫画讨论区</div>
                  <div class="discussion-box-right" @click="gotoPing(id)">
                    更多评论等你来看<van-icon name="arrow" />
                  </div>
                </div>
              </div>

              <div class="vote">
                <div class="vote-box">
                  <div class="vote-box-left left" @click="gotoPiao(img,title,id)">
                    <div class="left-box-top">
                      <div class="left-box-top-left">投喂</div>
                      <div class="left-box-top-right">
                        <span class="span">贡献榜</span>
                        <div class="left-box-top-right-img">
                          <div class="img-box" v-for="(item,index) in touWei" :key="index">
                            <img :src="item.avatar" alt="" />
                          </div>

                        </div>
                      </div>
                    </div>
                    <div class="left-box-bottom">
                      去投喂
                      <van-icon name="arrow" />
                    </div>
                  </div>
                  <div class="vote-box-left right" @click="gotoMounthPiao(img,title,id)">
                    <div class="left-box-top">
                      <div class="left-box-top-left">月票</div>
                      <div class="left-box-top-right">
                        <span class="span">贡献榜</span>
                        <div class="left-box-top-right-img">
                          <div class="img-box" v-for="(item,index) in yuePiao" :key="index">
                            <img :src="item.avatar" alt="" />
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="left-box-bottom">
                      去投喂
                      <van-icon name="arrow" />
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="recommd">
              <div class="recommd-title">
                <div class="recommd-title-left">更多推荐</div>
                <div class="recommd-title-right" @click="getChangeCartoon">
                  <van-icon name="replay" />
                  <span>换一批</span>
                </div>
              </div>
            </div>

            <div class="recommd-container">
              <div class="recommd-container-box">
                <div class="recommd-container-box-item" @click="goCartoon(item.id)" v-for="(item,index) in CartoonData" :key="index">
                  <div class="box-item-img">
                    <img :src="item.vertical_cover" alt="" />
                  </div>
                  <div class="box-item-title auto-text">{{item.title}}</div>
                  <div class="box-item-tiem">更新至{{item.last_short_title}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="cartoon-footer" v-show="IsLongding===true">
      <div class="cartoon-footer-left">
        <div class="van">
          <van-icon name="description" />
        </div>
        <van-cell title="目录" @click="show = true" />
        <van-action-sheet v-model="show" :title="title">
          <div class="content">
            <div class="content-container" v-for="(item,index) in CartoonContent" :key="index" @click="gotoCartton(id,index)">
              <div class="content-container-img">
                <img  v-lazy="item.cover" alt="" />
                <div class="lock" v-if="item.is_locked===true">
                  <van-icon name="lock" />
                </div>
              </div>
              <div class="content-container-right">
                <div class="content-container-right-top" :class="guan===index?'active':''">
                  <div>{{item.short_title}}</div>
                  <div class="content-tight-title auto-text">{{item.title}}</div>
                </div>
                <div class="content-bottom">
                  <div>{{item.pub_time}}</div>
                  <div class="content-bottom-middle">
                    <van-icon name="comment-o" />&nbsp;
                    <span>{{item.comments}}</span>
                  </div>
                  <div>
                    <van-icon name="good-job-o" />&nbsp;
                    <span>{{item.like_count}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-action-sheet>
      </div>
      <div class="cartoon-footer-right" @click="binTo(id)">
        <div>开始阅读</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CartoonContainer",
  data() {
    return {
      // 图片
      img:'',
      // 标题
      title:'',
      scroe:0,
      id:'',
      // 加载
      IsLongding: false,
      // 是否显示
      show: false,
      activeNames: ["1"],
      active: "",

      //  是否显示追漫
      isZhui: false,

      // 背景颜色
      backgroundColor: "rgba(255,255,255,0)",
      // 透明度
      opacity: 0,

      // 查看简介
      lookAbout: "查看简介",
      isLook: false,

      //   目录标题
      title: "全部章节",

    //   内容
    cartoonData:[],

    // 作者
    author:[],
    authorName:'',

    style:'',

    // 点评
    dianpin:[],

    // 漫画数据
    allCartoon:[],
    // 筛选数据
    CartoonData:[],
    // 开始跟结束更多漫画的下表
    startIndex:0,
    endIndex:6,
    // 漫画下标
    cartoonIndex:0,

    // 投喂榜
    touWei:[],
    // 月票
    yuePiao:[],

    // 章节内容
    CartoonContent:[],
    // 章节数量
    CartoonNumber:'',

    zhuiShow:false,

    arr:'',
    guan:0,
    };
  },
  created(){


      this.id = this.$route.query.id;
      

      this.getCartoonData(this.$route.query.id);

      this.getDian(this.$route.query.id);

      this.getCartoon(this.$route.query.id);

      this.getVote(this.$route.query.id)
      
      let data = JSON.parse(localStorage.getItem('user'));
      this.arr = data;
      if(this.arr != null){
        let str = document.cookie.split(';')
        let obj = {}
        str.forEach(v => {
            obj[v.split('=')[0].trim()] = v.split('=')[1]
        });
        if (obj.login!='true'){
            return
        }
        // let data = JSON.parse(localStorage.getItem('user'))
        for (let i = 0; i < data.length; i++) {
            if (obj.phone == data[i].phone) {
                for (let index = 0; index < data[i].zhui.length; index++) {
                    if (this.id == data[i].zhui[index]){
                        this.zhuiShow = true
                    }
                }
                break
            }
        }
      }


  },
  methods: {
    // 开始阅读
    binTo(id){
      
      this.$router.push({name:"chapter",query:{id}})
    },
    scroll() {
      if (this.$refs.cartoon.scrollTop > this.$refs.zhui.clientHeight) {
        this.isZhui = true;
        this.opacity = 1;
        this.backgroundColor = "rgba(255,255,255,1)";
      } else {
        this.isZhui = false;
        this.opacity = 0;
        this.backgroundColor = "rgba(255,255,255,0)";
      }
    },
    isZhuiShow(){
      if(this.arr != null){
          let str = document.cookie.split(';')
          let obj = {}
          str.forEach(v => {
              obj[v.split('=')[0].trim()] = v.split('=')[1]
          });
          if (obj.login==='true') {
              let data = JSON.parse(localStorage.getItem('user'))
          for (let i = 0; i < data.length; i++) {
              if (obj.phone == data[i].phone) {
                  for (let index = 0; index < data[i].zhui.length; index++) {
                      if (this.id === data[i].zhui[index]){
                          this.zhuiShow = false
                          data[i].zhui.splice(index,1)
                          localStorage.setItem('user',JSON.stringify(data))
                          return
                      }
                  }
                  data[i].zhui.push(this.id)
                  this.zhuiShow = true
                  break
              }
          }
          localStorage.setItem('user',JSON.stringify(data))
          // 
          }else{
            this.$toast("还没登录")
          }
      }else{
        this.$toast("还没登录")
      }

    },
    // 查看简介
    cahngeAbout() {
      // 显示的是查看简介
      if (this.isLook === false) {
        this.isLook = true;
        this.lookAbout = "收起";
      } else {
        this.isLook = false;
        this.lookAbout = "查看简介";
      }
    },

    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      Toast(item.name);
    },

    // 请求数据
    getCartoonData(id){
        this.axios({
            methods:'GET',
            url:'ComicDetail',
            params:{
                comicId:id
            }
        }).then(result=>{
          this.IsLongding = true;
          this.img = result.data.data.vertical_cover;
          this.title = result.data.data.title
            this.cartoonData = result.data.data;
            let arr = [];
            let name = '';
            for(let i = 0; i < result.data.data.author_name.length; i++){
                arr.push(result.data.data.author_name[i])
            }
            if(arr.length > 1){
              for(let j = 0 ; j < arr.length;j++){
                if(j === arr.length-1){
                  name += arr[j]
                }else{
                  name +=arr[j]+'、'
                }
              }
            }else if(arr.length===1){
              name = arr[0]
            }
            this.author = name;
            this.authorName = result.data.data.author_name[0];
            this.style = result.data.data.styles[0];

            this.CartoonContent = result.data.data.ep_list.reverse();
            for(let x = 0;x <this.CartoonContent.length;x++){
              let namm = this.CartoonContent[x].pub_time.split(" ");
              this.CartoonContent[x].pub_time = namm[0]
            }
            this.CartoonNumber = result.data.data.total
        })
    },

    // 点评
    getDian(id){
        this.axios({
            methods:'GET',
            url:'GetReviewDetailByComicID',
            params:{
                comicId:id
            }
        }).then(result=>{

            this.dianpin = result.data.data.short_reviews;
            if(this.dianpin.length > 0){
              for(let i = 0 ; i < this.dianpin.length;i++){
                this.dianpin[i].isDian=false
              }
            }

            this.scroe = result.data.data.score
        }).catch(err=>{
            
        })
    },

    // 更多漫画
    getCartoon(id){
        this.axios({
            methods:'GET',
            url:'MoreRecommend',
            params:{
                comicId:id
            }
        }).then(result=>{
            this.allCartoon = result.data.data.recommend_comics;
            for(let i = 0; i < this.allCartoon.length;i++){
              if(!isNaN(this.allCartoon[i].last_short_title)){
                this.allCartoon[i].last_short_title = this.allCartoon[i].last_short_title +'话'
              }
            }
            this.CartoonData = this.allCartoon.slice(this.startIndex,this.endIndex);

        }).catch(err=>{
          
        })
    },

    // 点击换一批
    getChangeCartoon(){
      this.startIndex = this.endIndex;
      this.endIndex += 6;
      if(this.endIndex > 18){
        this.startIndex = 0;
        this.endIndex = 6;
      }
      let arr = [];
          arr = this.allCartoon.slice(this.startIndex,this.endIndex);
      this.CartoonData = arr;
    },

    // 投票
    getVote(id){
      
      this.axios({
        methods:'GET',
        url:'GetEntranceForRank',
        params:{
          comicId:id
        }
      }).then(result=>{
        this.touWei = result.data.data.entrance.users;
        this.yuePiao = result.data.data.entrance.ticket_users;
      }).catch(err=>{
        
      })
    },

    // 返回上一级
    goBack(){
      this.$router.back();
    },

    // 重新跳转当前页面
    goCartoon(item){
      this.$router.push({name:"CartoonContainer",query:{id:item}})
    },

    // 跳转用户页面
    gotoUser(item){
      this.$router.push({name:"CartoonUser",query:{id:item}})
    },

    // 跳转评论
    gotoAction(item,item1,item2){
      this.$router.push({name:"CartoonComment",query:{id:item,title:item1,score:item2}})
    },

    gotoPiao(img,title,id){
      this.$router.push({name:"ranking",query:{id,title,img}})
    },
    gotoMounthPiao(img,title,id){
      this.$router.push({name:"MonthTicket",query:{id,title,img}})
    },

    // 跳转用户评论
    gotoPing(item){
      this.$router.push({name:"comment",query:{id:item}})
    },

    // 点赞
    dian(e,item){
      if(item.isDian === false){
        item.like_count++;
        item.isDian = true;
      }else{
        item.like_count--;
        item.isDian = false;
      }
    },

    gotoCartton(id,item){
      
      this.$router.push({name:"chapter",query:{id,Zid:item}});
    },
  },
  watch:{
    "$route"(value,oldvalue){
      if(value.name === oldvalue.name){
        this.$router.go(0);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.active{
  color: #33AAFA;
}
/deep/.van-icon-arrow-left:before{
  font-weight: bold;
  color: #fff;
  font-size: 19px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  text-align: center;
  padding: 2px;
}
.loading{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.lock{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #adacb1;
  text-align: center;
}
.author{
    display: flex;
    margin-top: 5px;
    color: #adacb1;
    .author-name{
      width: 88%;
        margin-left: 5px;
    }
}
/deep/.van-icon-comment-o {
  font-size: 16px;
}
/deep/.van-icon-good-job-o {
  font-size: 16px;
}
.titleActive {
  color: #30aafe;
}
.content-container-right-top {
  display: flex;
  font-size: 14px;
  align-items: center;
}
.content {
  padding: 10px;
  overflow-y: auto;
  .content-container {
    display: flex;
    margin-bottom: 10px;
    .content-container:last-child {
      margin-bottom: 0px;
    }
    .content-container-img {
      // width: 120px;
      width: 40%;
      border-radius: 5px;
      overflow: hidden;
      position: relative;
      > img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .content-container-right {
      width: 60%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 10px;
      .content-tight-title {
        display: inline-block;
        // width: 160px;
        flex: 1;
        padding: 0 10px;
      }
      .content-bottom {
        display: flex;
        color: #adacb1;
        .content-bottom-middle {
          padding: 0 10px;
        }
      }
    }
  }
}
/deep/.van-cell__title {
  text-align: center;
}
/deep/.van-cell {
  padding: 0;
  background-color: #ededed;
  font-size: 12px;
}
/deep/.van-icon-arrow-left {
  font-size: 18px;
  vertical-align: middle;
  padding-top: 1px;
}
/deep/.van-icon-star-o {
  font-size: 20px;
  line-height: 40px;
  padding-left: 8px;
}
/deep/.van-icon-good-job-o {
  font-size: 18px;
}
/deep/.van-icon-replay {
  padding-right: 3px;
}
/deep/.van-icon-description {
  font-size: 18px;
  padding-left: 2px;
}
.middle {
  height: calc(100vh - 55px);
  overflow-y: auto;
}
.van {
  text-align: center;
}
.cartoon-footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  .cartoon-footer-left {
    width: 15%;
    padding-top: 8px;
    background-color: #ededed;
  }
  .cartoon-footer-right {
    width: 85%;
    text-align: center;
    line-height: 55px;
    background-color: #30aafe;
    font-size: 16px;
    margin-left: auto;
  }
}

.recommd-container {
  .recommd-container-box {
    display: flex;
    flex-wrap: wrap;
    .recommd-container-box-item {
      width: calc(33.33% - 10px);
      margin-left: 10px;
      margin-bottom: 10px;
      .box-item-img {
        width: 100%;
        > img {
          width: 100%;
          display: block;
        }
      }
      .box-item-title {
        padding: 5px 0;
        font-size: 13px;
      }
      .box-item-tiem {
        color: #adacb1;
      }
    }
  }
}
.recommd {
  padding: 10px;
  .recommd-title {
    display: flex;
    .recommd-title-left {
      font-size: 15px;
      font-weight: 700;
    }
    .recommd-title-right {
      margin-left: auto;
    }
  }
}
.discussion {
  background-color: #f5f6f8;
  border-radius: 5px;
  .discussion-box {
    padding: 15px 10px;
    display: flex;
    .discussion-box-right {
      margin-left: auto;
      color: #adacb1;
    }
    .discussion-box-left {
      font-weight: 600;
      font-size: 15px;
    }
  }
}
.left-box-top-left::after {
  content: "";
  display: block;
  clear: both;
}
.span {
  margin-right: 5px;
  display: inline-block;
  height: 20px;
  padding-top: 3px;
}
.left {
  background-color: #fdf2d4;
}
.right {
  background-color: #eee6fe;
}
.vote {
  border-radius: 5px;
  .vote-box {
    display: flex;
    padding: 15px 0px;
    .vote-box-left {
      width: calc(50% - 10px);
      padding: 10px;
      .left-box-top {
        display: flex;
        .left-box-top-left {
          font-size: 16px;
          font-weight: 700;
        }

        .left-box-top-right {
          margin-left: auto;
          display: flex;
          .left-box-top-right-img {
            display: flex;
            padding-right: 10px;
            .img-box {
              width: 20px;
              height: 20px;
              object-fit: cover;
              margin-right: -5px;
              border-radius: 50%;
              overflow: hidden;
              > img {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                display: inline-block;
              }
            }
          }
        }
      }
      .left-box-bottom {
        float: right;
        padding-top: 5px;
      }
    }
  }
}

.select {
  .comment {
    padding: 10px;
    margin-top: 3px;
    border-top: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
    .comment-bottom {
      margin-top: 8px;
      margin-bottom: 10px;
    }
    .comment-top {
      display: flex;
      .comment-top-right {
        margin-left: auto;
      }
      .comment-top-left {
        font-size: 16px;
        font-weight: 700;
      }
    }
    .comment-bottom-box-top {
      display: flex;
      .comment-bottom-box-top-box {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
        background-color: #adacb1;
        > img {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
      .comment-bottom-box-top-box-name {
        margin-left: 8px;
        line-height: 40px;
        font-size: 13px;
      }
    }
    .comment-bottom-box-commit {
      margin-top: 8px;
      font-size: 13px;
    }
    .comment-bottom-box-bottom {
      margin-top: 8px;
      display: flex;
      .number {
        margin-left: 2px;
        font-size: 13px;
        padding-top: 2px;
      }
      .time-left{
          margin-left: auto;
          padding-right: 5px;
          padding-top: 2px;
          color: #adacb1;
      }
    }
  }
}
.cartoon-userinfo {
  padding: 12px;
  .userinfo-name {
    font-size: 16px;
    font-weight: bold;
  }
  .userinfo-time {
    padding: 5px 0;
    .userinfo-finshi {
      font-weight: 700;
    }
    .userinfo-finshi-time {
      padding-left: 5px;
    }
  }
  .userinfo-username {
    display: flex;
    color: #adacb1;
    .updata {
      padding-left: 5px;
    }
    .privoce {
      padding-right: 5px;
    }
    .userinfo-username-left {
      width: 70%;
    }
    .userinfo-username-right {
      margin-left: auto;
      .userinfo-username-right-box {
        padding-right: 10px;
      }
    }
  }
  .introduction {
    width: 100%;
    display: flex;
    margin-top: 10px;
    color: #adacb1;
    .introduction-container {
      width: 88%;
    }
  }
}
.cartoon-position {
  width: 70px;
  height: 40px;
  line-height: 40px;
  position: absolute;
  bottom: -6px;
  right: 10px;
  font-size: 14px;
  background-color: #ff9c10;
  border-radius: 10px 0px 10px 0px;
  .cartoon-position-box {
    display: flex;
  }
}
.cartoon-img {
  width: 100%;
  position: relative;
  .cartoon-img-box {
    > img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
}
.cartoon-container {
  .cartoon-nav {
    position: fixed;
    width: calc(100% - 20px);
    padding: 10px;
    display: flex;
    z-index: 999;
    .cartoon-name {
      width: 60%;
      margin-left: 10px;
      font-size: 15px;
    }
    .cartoon-right {
      margin-left: auto;
      padding: 2px 16px;
      text-align: center;
      background-color: #ff9c10;
      border-radius: 8px 0px 8px 0px;
      margin-top: 1px;
    }
  }
}
</style>